<template>
	
	<!-- 
		点击按钮发送ajax请求，而该按钮明明在该模块中，而为什么将请求ajax的代码写到Main中呢？
		
		主要是因为在请求ajax前和请求ajax后，都需要更新Main组件中数据的状态，如果在该组件发送请求，那更新Main组件中数据的状态将非常麻烦。
		 
		Search组件和Main组件是兄弟关系，因而，Search组件和Main组件之间是兄弟组件间的通信
		
		兄弟间的组件通信，最好的办法是通过消息订阅与发布的方式
	 -->
<section class="jumbotron">
	<h3 class="jumbotron-heading">Search Github Users</h3>
	<div>
		<input type="text" placeholder="enter the name you search" v-model="searchName"/>
		<button @click="search">Search</button>
	</div>
</section>
</template>

<script>
	import PubSub from 'pubsub-js' // 引入消息订阅类库
	export default {
		data() {
			return {
				searchName:''
			}
		},
		methods:{
			search() {
				const searchName = this.searchName;
				if(!searchName) {
					alert("名字都没输入，老子咋给你搜索...");
					return;
				} else {
					// 发布搜索的消息
					PubSub.publish('search', searchName);
				}
			}
			
		}
	}
</script>

<style>
</style>
